<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>套餐统计</title>
    <base href="<%=basePath %>"/>
    <link rel="stylesheet" href="assets/css/bootstrap.css"/>
    <script src="assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
<h1 align="center">套餐统计</h1>


<div style="width: 550px; margin: 0 auto">
    <p align="center">
        <select class="form-group-sm" id="comboId" name="comboId" style="height: 25px;margin-top: 2px">
            <c:forEach items="${lists}" var="u">
                <option value="${u.comboId}">
                        ${u.comboName}
                </option>
            </c:forEach>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <a type="button" class="btn-sm btn-primary" onclick="week()">本周</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a type="button" class="btn-sm btn-primary" onclick="mont()">本月</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a type="button" class="btn-sm btn-primary" onclick="year()">近半年</a>
    </p>
    <div align="right" id="userSum"></div>
</div>
<%--<div id="week" style="width: 550px; height: 300px; margin: 0 auto"></div>--%>
<div id="week" style="width: 700px; height: 350px; margin: 0 auto"></div>
</body>
<script>
    $(document).ready(function () {
        week();
    });
    //周统计
    function week() {
        $.post("statis/weekk.action",
            {'comboId':$('#comboId').val()},
            function (data1) {
                console.log(data1);
                weekCount(data1);

            }
        )
        function weekCount(data1) {
            var data=data1;
            var sum;
            var chart = {
                type: 'column'
            };
            var title = {
                text: ''
            };
            var subtitle = {
                text: '本周'
            };
            var xAxis = {
                categories: ['周一','周二','周三','周四','周五','周六','周日'],
                crosshair: true
            };
            var yAxis = {
                min: 0,
                title: {
                    text: '套餐使用数'
                }
            };
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            var plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            var credits = {
                enabled: false
            };
            // data=[0,0,0,0,0,0,0];
            var series=[{
                name:'星期',
                data:data
            }];
            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            json.plotOptions = plotOptions;
            json.credits = credits;
            $('#week').highcharts(json);
        }
    }

    //月统计
    function mont() {

        $.post("statis/mouth.action",
            {'comboId':$('#comboId').val()},
            function (data3) {
                console.log(data3);
                Count(data3);
            }
        )
        function Count(data3) {
            var data=data3.data;
            var sum;
            var chart = {
                type: 'column'
            };
            var title = {
                text: ''
            };
            var subtitle = {
                text: '本月'
            };
            var xAxis = {
                categories: data3.dataName,
                crosshair: true
            };
            var yAxis = {
                min: 0,
                title: {
                    text: '套餐使用数'
                }
            };
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            var plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            var credits = {
                enabled: false
            };
            // data=[0,0,0,0,0,0,0];
            var series=[{
                name:'天',
                data:data
            }];
            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            json.plotOptions = plotOptions;
            json.credits = credits;
            $('#week').highcharts(json);
        }
    }

    //半年统计
    function year() {
        $.post("statis/yearth.action",
            {'comboId':$('#comboId').val()},
            function (data2) {
                console.log(data2);
                halfyearCount(data2);
            }
        )
        function halfyearCount(data2) {
            var data=data2.data;
            var sum;
            var chart = {
                type: 'column'
            };
            var title = {
                text: ''
            };
            var subtitle = {
                text: '近半年'
            };
            var xAxis = {
                categories:  data2.dataName,
                crosshair: true
            };
            var yAxis = {
                min: 0,
                title: {
                    text: '套餐使用数'
                }
            };
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            var plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            var credits = {
                enabled: false
            };
            // data=[0,0,0,0,0,0,0];
            var series=[{
                name:'月',
                data:data
            }];
            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            json.plotOptions = plotOptions;
            json.credits = credits;
            $('#week').highcharts(json);
        }
    }




</script>
</html>
